<template>
	<div class="order-box">
		<!-- 头部 -->
		<div class="head"><TopTab topTabTitle="购物车"></TopTab></div>
		<!-- 内容 -->
		<div class="cont-box">
			<!-- 添加地址 -->
			<div class="add-address">
				<div v-if="address" class="add-no" @click="addAddress"><p>+添加您的收货地址</p></div>
				<div v-else class="add-is">
					<img src="http://i.huasongwang.com/i/c/map-icon.png" alt="" />
					<div class="add-is-info">
						<p>
							收货人信息：
							<span>{{ addressInfo.recName }} {{ addressInfo.recPhone }}</span>
						</p>
						<p>
							收货地址：
							<span>{{ addressInfo.area }} {{ addressInfo.detailed }}</span>
						</p>
					</div>
					<img @click="addAddress" src="http://i.huasongwang.com/i/c/right-icon.png" alt="" />
				</div>
			</div>

			<!-- 商品信息 -->
			<div class="cart-info">
				<p class="cart-info-title">商品信息</p>
				<ul class="cart-list">
					<li v-for="goods in cartList" :key="goods.id">
						<img class="cart-list-img" :src="goods.imgPath" alt="ggg" />
						<div class="goods-info">
							<p>{{ goods.name }}</p>
							<span>￥{{ goods.price }}</span>
						</div>
						<div class="as-num-box">
							<div class="num-box">
								<span class="num-box-span"><Subtract :num="goods.num" :goodsId="goods.id" @clickHandle="numSub"></Subtract></span>
								<input type="text" :value="goods.num" />
								<span><AddInto :num="goods.num" :goodsId="goods.id" @clickHandle="numAdd"></AddInto></span>
							</div>
						</div>
					</li>
				</ul>
			</div>

			<!-- 选择 -->
			<ul class="fillIn">
				<li>
					<h6>配送日期：</h6>
					<p>2020-222</p>
					<img src="http://i.huasongwang.com/i/c/ricon.png" alt="" />
				</li>
				<li>
					<h6>选择客服：</h6>
					<p>点击选择客服</p>
					<span></span>
				</li>
				<li>
					<h6>贺卡留言：</h6>
					<p @click="leaving" :class="leavInfo ? 'chenkFill' : ''">{{ leavInfo ? leavInfo : '选填' }}</p>
					<img src="http://i.huasongwang.com/i/c/ricon.png" alt="" />
				</li>
				<li>
					<h6>其他信息：</h6>
					<p>填选（发票等）</p>
					<img src="http://i.huasongwang.com/i/c/ricon.png" alt="" />
				</li>
				<li>
					<h6>优惠折扣：</h6>
					<input type="text" placeholder="请输入优惠券码" />
					<span></span>
				</li>
			</ul>

			<!-- 金额 -->
			<ul class="money">
				<li>
					<p>商品金额：</p>
					<span>￥{{totalPrice}}</span>
				</li>
				<li>
					<p>优惠折扣：</p>
					<span>-￥0</span>
				</li>
			</ul>

			<p class="agreement">
				<input type="checkbox" checked="checked" />
				<span>立即下单，同意《购买须知》的服务内容</span>
			</p>
		</div>
		<!-- 底部 -->
		<ul class="footer">
			<li>
				<h6>
					应付总额：
					<span>￥{{ totalPrice }}</span>
				</h6>
			</li>
			<li @click="placeOrder">提交订单</li>
		</ul>

		<!-- 信息填写 -->
		<div class="gathering" v-show="showFillInfo != ''">
			<div class="gat-head"><GatheringTop :title="showFillInfo" @clickHandel="back"></GatheringTop></div>
			<!-- 地址填写 -->
			<div class="address-gat-box" v-show="showFillInfo == '收货地址'">
				<ul class="address-gat">
					<li>
						<p>收货姓名：</p>
						<input type="text" placeholder="收货人姓名" ref="recName" :value="addressInfo.recName" />
						<span>*必填</span>
					</li>
					<li>
						<p>收货电话：</p>
						<input type="text" placeholder="收花人电话" ref="recPhone" :value="addressInfo.recPhone" />
						<span>*必填</span>
					</li>
					<li>
						<p>配送地区：</p>
						<input type="text" ref="area" />
						<span></span>
					</li>
					<li>
						<p>详细地址：</p>
						<input type="text" placeholder="请填写收货人详细地址" ref="detailed" :value="addressInfo.detailed" />
						<span>*必填</span>
					</li>
					<li>
						<p>您的姓名：</p>
						<input type="text" placeholder="订货人姓名" ref="name" :value="addressInfo.name" />
						<span></span>
					</li>
					<li class="gat-last">
						<p>您的电话：</p>
						<input type="text" placeholder="订货人电话" ref="phone" :value="addressInfo.phone" />
						<span>*必填</span>
					</li>
				</ul>
				<button @click="confirm(1)">确认无误</button>
			</div>

			<!-- 留言填写 -->
			<div class="leav-gat-box" v-show="showFillInfo == '填写贺卡'">
				<textarea v-model.lazy="leavInfo" placeholder="请输入您想给TA的留言..." />
				<router-link to="">点击，获取更多贺卡信息</router-link>
				<button @click="confirm(2)">确认</button>
			</div>
		</div>

		<!-- 信息错误提示 -->
		<div v-show="showNumTipt" class="numTipt" :style="{ opacity: transparent }">{{ tiptInfo }}</div>
	</div>
</template>

<script>
import TopTab from '@/components/topTab.vue';
import AddInto from '@/components/addInto.vue'; //数量加
import Subtract from '@/components/subtract.vue'; //数量减
import GatheringTop from '@/components/gatheringTop.vue';
export default {
	name: 'order',
	data() {
		return {
			cartList: this.$store.state.cartList,
			address: true,
			showFillInfo: '',
			showNumTipt: false,
			transparent: 1,
			tiptInfo: '',
			auto: null,
			addressInfo: {
				recName: '',
				recPhone: '',
				area: '',
				detailed: '',
				name: '',
				phone: ''
			},
			leavInfo: ''
		};
	},

	methods: {
		/* 添加地址 */
		addAddress() {
			this.showFillInfo = '收货地址';
		},
		/* 填写留言 */
		leaving() {
			this.showFillInfo = '填写贺卡';
		},
		/* 返回 */
		back() {
			this.showFillInfo = '';
		},
		/* 提示 */
		tipt() {
			clearInterval(this.auto);
			this.auto = setInterval(() => {
				this.transparent -= 0.05;
				if (this.transparent <= 0.1) {
					this.showNumTipt = false;
					this.transparent = 1;
					clearInterval(this.auto);
				}
			}, 100);
		},
		/* 信息填写 */
		confirm(n) {
			// n  1:地址   2：留言    3：发票   4：优惠券
			switch (n) {
				case 1:
					if (this.$refs.recName.value == '') {
						this.showNumTipt = true;
						this.tiptInfo = '收货地址不能为空！';
						this.tipt();
					} else if (this.$refs.recPhone.value == '') {
						this.showNumTipt = true;
						this.tiptInfo = '收货电话不能为空！';
						this.tipt();
					} else if (this.$refs.detailed.value == '') {
						this.showNumTipt = true;
						this.tiptInfo = '收货地址不能为空！';
						this.tipt();
					} else if (this.$refs.phone.value == '') {
						this.showNumTipt = true;
						this.tiptInfo = '订货人电话不能为空！';
						this.tipt();
					} else {
						this.addressInfo.recName = this.$refs.recName.value;
						this.addressInfo.recPhone = this.$refs.recPhone.value;
						this.addressInfo.area = this.$refs.area.value;
						this.addressInfo.detailed = this.$refs.detailed.value;
						this.addressInfo.name = this.$refs.name.value;
						this.addressInfo.phone = this.$refs.phone.value;

						localStorage.setItem('addressInfo', JSON.stringify(this.addressInfo));
						this.address = false;
						this.back();
					}
					break;

				case 2:
					this.back();
					break;
			}
		},

		/* 提交订单 */
		placeOrder() {
			this.$router.replace('/genOrder');
		},

		/* 数量减 */
		numSub(res) {
			if (res.result > 0) {
				this.cartList.forEach(item => {
					if (res.goodsId == item.id) {
						item.num = res.result;
							this.dataUp(item);
					}
				});
			}
		},
		/* 数量加 */
		numAdd(res) {
			// console.log(1)
			this.cartList.forEach(item => {
				if (res.goodsId == item.id) {
					item.num = res.result;
					this.dataUp(item);
				}
			});
			
		},
		/* 更新本地 */
		dataUp(goods) {
			this.$store.dispatch("setCartListAsync",{
				action:"UP",
				goods:goods
			})
		}
	},

	computed: {
		/* 总价 */
		totalPrice() {
			return this.cartList.reduce((temp, item) => {
				return temp + item.price * item.num;
			}, 0);
		}
	},
	created() {

		/* 获取地址 */
		let getAddressInfo = JSON.parse(localStorage.getItem('addressInfo')) ? JSON.parse(localStorage.getItem('addressInfo')) : {};
		// console.log(getAddressInfo);
		if (getAddressInfo.recName) {
			this.addressInfo = getAddressInfo;
			this.address = false;
		} else {
			this.address = true;
		}
	},
	mounted() {
		document.querySelector('.gathering').style.height = document.documentElement.clientHeight + 'px';
	},
	components: {
		TopTab,
		AddInto,
		Subtract,
		GatheringTop
	}
};
</script>

<style scoped="scoped">
@import url('../css/publice.css');
.order-box {
	width: 100%;
	background-color: #f5f5f5;
}
.head {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 3;
}
.cont-box {
	width: 100%;
	position: absolute;
	top: 0.92rem;
	overflow: auto;
	margin-bottom: 1.02rem;
}
/* 添加地址 */
.add-address {
	width: 100%;
	height: 1.58rem;
	background-color: #5e6b85;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* 没有地址 */
.add-no {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.add-no p {
	color: white;
	font-size: 0.3rem;
}

/* 已有地址 */
.add-is {
	width: 100%;
	height: 1.18rem;
	display: flex;
	justify-content: space-between;
	padding-left: 0.15rem;
	padding-right: 0.25rem;
}
.add-is img:first-child {
	width: 0.48rem;
	height: 0.61rem;
}
.add-is-info {
	width: 80%;
	height: 100%;
	color: white;
	font-size: 0.3rem;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.add-is img:last-child {
	margin-top: 0.3rem;
	width: 0.32rem;
	height: 0.58rem;
}
/* 购物车信息 */
.cart-info {
	width: 100%;
	background-color: white;
	margin-top: 0.2rem;
}
.cart-info-title {
	width: 100%;
	height: 0.8rem;
	border-bottom: 0.01rem solid #ddd;
	line-height: 0.8rem;
	padding-left: 0.2rem;
	font-size: 0.28rem;
	color: #666;
}
/* 商品信息 */
.cart-list {
	width: 100%;
}
.cart-list li {
	width: 100%;
	height: 1.4rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 0.2rem;
	padding-right: 0.6rem;
}
.cart-list-img {
	width: 1.2rem;
	height: 1.2rem;
}
.goods-info {
	width: 40%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0.3rem 0;
}
.goods-info p {
	font-size: 0.3rem;
}
.goods-info span {
	color: #f42424;
}
.as-num-box {
	width: 1.88rem;
}

/* 信息填写 */
.fillIn {
	width: 100%;
	margin-top: 0.3rem;
	background-color: white;
}

.fillIn h6,
.money li p {
	width: 1.8rem;
	font-weight: normal;
	font-size: 0.3rem;
	color: #555555;
}
.fillIn .chenkFill {
	color: black;
	font-size: 0.3rem;
}
.fillIn li {
	width: 100%;
	height: 0.88rem;
	border-bottom: 0.01rem solid #ddd;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0.1rem;
}
.fillIn li p {
	color: #999999;
	text-align: left;
	width: 5.2rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fillIn li input {
	color: #999999;
	width: 5.3rem;
	outline: none;
	border: none;
	text-align: left;
}
.fillIn li img {
	width: 0.12rem;
	height: 0.21rem;
}

/* 金额 */
.money {
	width: 100%;
	background-color: white;
	padding: 0 0.1rem;
	margin-top: 0.2rem;
}
.money li {
	width: 100%;
	height: 0.88rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.money li span {
	color: #999999;
	font-size: ;
}

.agreement {
	width: 100%;
	height: 0.88rem;
	border-top: 0.01rem solid #ddd;
	border-bottom: 0.01rem solid #ddd;
	background-color: white;
	display: flex;
	align-items: center;
	padding-left: 0.1rem;
}
.agreement input {
	width: 0.3rem;
	height: 0.3rem;
}

.agreement span {
	padding-left: 0.05rem;
}

/* 数量 */
.num-box {
	width: 100%;
	display: flex;
	align-items: center;
}

.num-box p {
	padding: 0.15rem 0;
}

.num-box span {
	width: 0.56rem;
	height: 0.56rem;
	border: 0.01rem solid #ddd;
	display: flex;
	justify-content: center;
	align-items: center;
}

.num-box-span {
	border-radius: 0.1rem 0 0 0.1rem;
}

.num-box input {
	width: 1rem;
	height: 0.52rem;
	border: 0.01rem solid #ddd;
	text-align: center;
}

.num-box span:last-child {
	border-radius: 0 0.1rem 0.1rem 0;
}

.footer {
	width: 100%;
	height: 1.02rem;
	display: flex;
	justify-content: space-between;
	border-bottom: 0.01rem solid #ddd;
	border-top: 0.01rem solid #ddd;
	position: fixed;
	bottom: 0;
	z-index: 3;
	background-color: white;
	/* background-color: skyblue; */
}
.footer li {
	height: 100%;
}
.footer li:first-child {
	height: 1.02rem;
	width: 57%;
	display: flex;
	align-items: center;
	padding-left: 0.1rem;
}
.footer li:first-child h6 {
	font-size: 0.3rem;
}
.footer li:first-child h6 span {
	color: #f42424;
}
.footer li:last-child {
	height: 1rem;
	width: 43%;
	background-color: #f42424;
	font-size: 0.35rem;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 信息收集 */
.gathering {
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 8;
	background-color: white;
}
.gat-head {
	width: 100%;
}

/* 地址填写 */
.address-gat-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.address-gat {
	width: 100%;
	padding-top: 0.2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.address-gat li {
	width: 100%;
	height: 0.84rem;
	display: flex;
	align-items: center;
	border-bottom: 0.01rem solid #ddd;
}
.address-gat li p {
	width: 1.86rem;
	color: #666666;
	font-size: 0.28rem;
	text-align: right;
}
.address-gat li input {
	width: 4.28rem;
	border: none;
	font-size: 0.23rem;
	padding-left: 0.1rem;
}
.address-gat li span {
	color: #e4162a;
}
.address-gat li:last-child {
	border: none;
}

.address-gat-box button {
	width: 7.2rem;
	height: 0.8rem;
	background-color: #e4162a;
	border: none;
	border-radius: 0.2rem;
	color: white;
	margin-top: 0.5rem;
}

/* 提示框 */
.numTipt {
	position: fixed;
	top: 50%;
	left: 20%;
	z-index: 50;
	width: 4.78rem;
	height: 0.92rem;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 0.3rem;
	color: white;
}
/* 留言 */
.leav-gat-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 0.3rem;
}
.leav-gat-box textarea {
	width: 90%;
	height: 3rem;
	border: 0.01rem solid #ddd;
	padding: 0.1rem;
}
.leav-gat-box a {
	color: #666666;
	font-size: 0.3rem;
	padding-top: 0.6rem;
	padding-bottom: 0.3rem;
}
.leav-gat-box button {
	width: 80%;
	height: 0.8rem;
	border: none;
	border-radius: 0.1rem;
	background-color: #f42424;
	color: white;
	font-size: 0.35rem;
}
</style>
